<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>IT服务</title>
    <link rel="shortcut icon" href="favicon.jpg"/>
    <link rel="stylesheet" href="3rd/element-ui@2.13.2/lib/theme-chalk/index.css"/>
    <link rel="stylesheet" href="css/app.css"/>
    <link rel="stylesheet" href="css/reset.css"/>
    <style>


        .bottom{
            position:fixed;
            bottom:10px;
            /*margin-left: 40%;*/
            left: 50px;

            /*width: 1010px;*/

        }
        .el-row {
            margin-bottom: 20px;
        &:last-child {
             margin-bottom: 0;
         }
        }
        .num{
            color: red;
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <el-container>
        <el-main>
            <template>
                <el-tabs v-model="activeName" @tab-click="handleClick" stretch="true">
                    <el-tab-pane name="first">
                        <span slot="label">
                                全部工单
                        </span>
                        <div class="num">
                            <el-card v-for="item in processAll" :key="item.processNo" :body-style="{ display: 'flex', padding: 2 }" @click.native="toOneDesk(item.processNo)">
                                <div slot="header" class="clearfix">
                                    <span class="el-icon-warning-outline" style="color: #ff4d51"></span>
                                    问题类型：{{item.subject}}
                                    <span style="float: right; padding: 3px 0">
                                        <p v-if="item.status==0">待审批</p>
                                        <p v-if="item.status==1">已审批</p>
                                        <p v-if="item.status==2">已退回</p>
                                    </span>
                                </div>
                                <div class="detail">
                                    <p class="el-icon-s-custom" style="color: #b3e19d"></p>
                                    申请人：{{ item.createName }}
                                    <br/><br/>
                                    <p class="el-icon-tickets" style="color: #44fd37"></p>
                                    内容：{{ item.content }}
                                    <br/>
                                    <br/>
                                    <div v-if="!item.score">
                                    </div>
                                    <div v-else>
                                        <el-rate v-model="item.score" disabled></el-rate>
                                    </div>
                                </div>
                            </el-card>
                        </div>

                    </el-tab-pane>
                    <el-tab-pane label="待审批工单" name="second">
                        <div class="num">
                            <el-card v-for="item in processUnApp" :key="item.processNo" :body-style="{ display: 'flex', padding: 2 }" @click.native="toOneDesk (item.processNo)">
                                <div slot="header" class="clearfix">
                                    <span class="el-icon-warning-outline" style="color: #ff4d51"></span>
                                    问题类型：{{item.subject}}
                                </div>
                                <div class="detail">
                                    <p class="el-icon-s-custom" style="color: #b3e19d"></p>
                                    申请人：{{ item.createName }}
                                    <br/><br/>
                                    <p class="el-icon-tickets" style="color: #44fd37"></p>
                                    内容：{{ item.content }}
                                    <br/>
                                    <br/>
                                    <div v-if="!item.score">
                                    </div>
                                    <div v-else>
                                        <el-rate v-model="item.score" disabled></el-rate>
                                    </div>
                                </div>
                            </el-card>
                        </div>


                    </el-tab-pane>
                    <el-tab-pane label="已审批工单" name="third">
                        <div class="num">
                            <el-card v-for="item in processApp" :key="item.processNo" :body-style="{ display: 'flex', padding: 2 }" @click.native="toOneDesk(item.processNo)">
                                <div slot="header" class="clearfix">
                                    <span class="el-icon-warning-outline" style="color: #ff4d51"></span>
                                    问题类型：{{item.subject}}
                                </div>
                                <div class="detail">
                                    <p class="el-icon-s-custom" style="color: #b3e19d"></p>
                                    申请人：{{ item.createName }}
                                    <br/><br/>
                                    <p class="el-icon-tickets" style="color: #44fd37"></p>
                                    内容：{{ item.content }}
                                    <br/>
                                    <br/>
                                    <div v-if="!item.score">
                                    </div>
                                    <div v-else>
                                        <el-rate v-model="item.score" disabled></el-rate>
                                    </div>
                                </div>
                            </el-card>
                        </div>

                    </el-tab-pane>
                </el-tabs>
            </template>
        </el-main>


    </el-container>
    <div class="bottom">
        <el-button type="primary" @click="toIndex">主页</el-button>
    </div>
</div>
<script src="3rd/polyfill.min.js"></script>
<script src="3rd/vue.min.js"></script>
<script src="3rd/element-ui@2.13.2/lib/index.js"></script>
<script src="3rd/axios.min.js"></script>
<script src="js/util.js"></script>
<script src="js/approve.js"></script>
</body>
</html>
